import { Component } from 'react';

import {  Boxs,SearchBar,Button,Popup} from 'saltui';

const { HBox, Box,} = Boxs;

import './treetable.less';



export default class Page extends Component {
  constructor(props) {
    super(props);

    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    var height='';
    if(isAndroid==true){
        height = window.screen.height-70-44-45+"px";
    }else if(isiOS==true){
        height = window.screen.availHeight-70-44-45+"px";
    }else {
        if(window.screen.availHeight) {
            height = '550px';
        }
    }

    this.state = {
      all:0,
      height:height,
      visible:false,

      todoList:[ {
        "checked":false,
        "name":"一级11111111111111111111111",
        "show":true,
        "id":0,
        "showSubList":false,
        "checkedAll":false,
        "todo":[
        {
          "name":"二级1111111111",
          "show":true,
          "id":1,
          "pId":0,
          "showSubList":false,
          "checked":false,
          "todo":[
                {
                  "name":"三级1111111111",
                  "show":true,
                  "id":2,
                  "pId":1,
                  "checked":false,
                },
                {
                  "name":"三级22222",
                  "show":true,
                  "id":3,
                  "pId":1,
                  "checked":false,
                },        
          ]
        },
        {
          "name":"二级222222222222222",
          "show":true,
          "id":2,
          "pId":0,
          "showSubList":false,
          "checked":false,
          "todo":[
                {
                  "name":"三级1111111111",
                  "show":true,
                  "id":3,
                  "pId":2,
                  "checked":false,
                },
                {
                  "name":"三级22222",
                  "show":true,
                  "id":4,
                  "pId":2,
                  "checked":false,
                },        
          ]
        }
        ]
      }
     ],
    };
  }

  componentDidMount (){
  }

  // 子组件初始化
  initState() {
    let t = this;
    // 控制弹出
    let visible = t.props.visible;

    t.setState({
        visible:visible,
    });
  }

  //点击当前，子栏目全选是否取消
  abc(sublist,list){
    if (sublist != null && sublist.length > 0) {
      for (var i = 0; i < sublist.length; i++) {
        var obj = sublist[i];
        if(list.checked == true){
          obj.checked = true;
        }else{
          obj.checked = false;
        }      
        var todo = obj.todo;
        this.abc(todo,obj);
      }
    }
    return list;
  }

  //点击当前，父级栏目全选是否取消
  mml(plist,id,list){
   
      var n = 0;
      for ( var k = 0; k < list.length; k++){
        if(list[k].checked == true){
          n = n + 1;
        }      
      }
      if (plist != null && plist.length > 0) {
        debugger
        for (var i = 0; i < plist.length; i++) {
          var obj = plist[i];
          if(obj.id == id){
            if(obj.todo.length == n){
              obj.checked = true;
            }else{
              obj.checked = false;
            }
          };
          this.mml(obj.todo,list[i].pId,list)
        }
      }

   // return plist;
   
  }

  bindCheck1(i,e){
    debugger
    var todoList=this.state.todoList;
    todoList[i].checked=!todoList[i].checked;
    this.abc(todoList[i].todo,todoList[i]);

    this.setState({
      todoList:todoList,
    })
  }

  bindCheck2(i,j,e){
    var todoList=this.state.todoList;
    j[i].checked=!j[i].checked;

    this.abc(j[i].todo,j[i]);
    var id = j[i].pId;
    this.mml(todoList,id,j);

    this.setState({
      todoList:todoList,
    })
  }

  showSubList1(i,e){ 
    var todoList=this.state.todoList;
    todoList[i].showSubList=!todoList[i].showSubList;

    this.setState({
      todoList:todoList,
    })
  }

  showSubList2(i,j,e){ 
  
    j[i].showSubList=!j[i].showSubList;
  
    this.setState({
      todoList:this.state.todoList,
    })
  }

  // 点击蒙层关闭
  closMask(){
    this.props.closMask(this);
  }

  // 获取选择结构
  getContent(){

  }

  render() {
    const t = this;
     const props = {
      locale: 'zh_CN',
      instantSearch: true,
      hasHistory: true,
      searchDelay: 450,
      onEnter: () => { console.log('enter'); },
      onExit: () => { console.log('exit'); },
      onChange: (value) => {
        console.log(`Typing>>${value}`);
      },
      onSearch: (value) => {
        console.info(`Do search>>${value}`);
        if (t.refs.list) {
          t.refs.list.fetchData({
            keyword: value,
          });
        }
      },
    };

    return (

      <div >
        <Popup
          content={
              <div className="t-BCf"  style={{width:300}}>
                <SearchBar {...props} />
                <div className={this.state.checkedAll?"t-PL16 t-PR16 t-PT10 t-PB10 dd-top-border ":"t-PL16 t-PR16 t-PT10 t-PB10 un-checked dd-top-border"}>
                    <HBox vAlign="center">
                      <HBox>
                        <div className='t-checkbox-field-icon-list' >
                          <i className="iconfont icon-checked t-FCf t-FS14"></i>
                        </div>
                      </HBox>
                      <Box flex={1} className="t-ML10">
                          全选
                      </Box>
                    </HBox>
                </div>
                <div className="t-H10 t-BCf7"></div>
                
                {
                  this.state.todoList.map(function(item,i){
                    return(
                      <div>
                        <HBox vAlign="center" className="dd-top-border ">
                         
                          <Box className="t-PT12 t-PB12 t-PL16 t-PR6"><i className="iconfont icon-personnelregister t-FCd t-FS20"></i></Box>
                          <HBox flex={1} onClick={this.showSubList1.bind(this,i)}>
                            <Box flex={1} className="t-FS16 t-PL4 t-PR10 t-omit t-WB">{item.name}</Box>
                            <Box className="t-PR16"><i className={item.showSubList?"iconfont icon-arrow-up t-rotate-180 t-FCc":"iconfont icon-arrow-up t-rotate-90 t-FCc"}></i></Box>
                          </HBox>
                          
                        </HBox>
                        <div className={item.showSubList?"":"t-DN"}>
                        {
                          item.todo.map(function(subItem,j,i){
                            return(
                              <div className="dd-top-border" >
                                <HBox vAlign="center">
                                  
                                  <Box className="t-PT12 t-PB12 t-PL16 t-PR6"><i className="iconfont icon-personnelregister t-FCd t-FS20"></i></Box>
                                  <HBox flex={1} onClick={this.showSubList2.bind(this,j,i)}>
                                    <Box flex={1} className="t-FS16 t-PL4 t-PR10 t-omit t-WB">{subItem.name}</Box>
                                    <Box className="t-PR16"><i className={subItem.showSubList?"iconfont icon-arrow-up t-rotate-180 t-FCc":"iconfont icon-arrow-up t-rotate-90 t-FCc"}></i></Box>
                                  </HBox>
                                </HBox>
                                <div className={subItem.showSubList?"":"t-DN"}>
                                    {
                                      subItem.todo.map(function(subItem2,j,i){
                                        return(
                                          <div className="dd-top-border" onClick={this.bindCheck2.bind(this,j,i)}>
                                            <HBox vAlign="center">
                                              <Box className="t-PL16">
                                                <div className={subItem2.checked?"t-checkbox-field-icon-list":"un-checked t-checkbox-field-icon-list"} >
                                                  <i className="iconfont icon-checked t-FCf t-FS14"></i>
                                                </div>
                                              </Box>
                                              <Box className="t-PT12 t-PB12 t-PL10 t-PR6"><i className="iconfont icon-personnelregister t-FCd t-FS20"></i></Box>
                                              <Box flex={1} className="t-FS16 t-PL4 t-PR10 t-omit">{subItem2.name}</Box>
                                      
                                            </HBox>
                                    
                                          </div>
                                        )
                                      }.bind(this))
                                    }
                                        
                                    </div>
                         
                              </div>
                            )
                          }.bind(this))
                        }
                            
                        </div>
                      </div>
                      )
                   
                  }.bind(this))
                }

                <HBox vAlign="center" className="t-bottom-fixed t-P16 t-PT10 t-PB10">
                  <Box flex={1} >
                    
                  </Box>
                  <Box className="t-MR4">
                    <Button type="secondary" size="small" display="inline">取消</Button>
                  </Box>
                  <Box>
                    <Button type="primary" size="small" display="inline">确定</Button>
                  </Box>
                </HBox>
                
              </div>
           

             }
          animationType="slide-left"
          onMaskClick={() => { this.setState({ visible: false });this.closMask(); }}
          visible={this.state.visible}
        >
          {null}
        </Popup>
     </div>
        
    );
  }
}



